<template>
  <div class="register">
    <van-icon name="arrow-left" size="40" class="van" color="#ccc" @click="back"/>
    <h2 class="reg">用户注册</h2>
    <div class="wrapper">
      <van-form class="formList">
        <van-field
          class="form"
          v-model="phone"
          name="手机号码"
          maxlength="11"
          placeholder="请输入手机号码"
          :rules="[{ required: true, message: '请输入手机号码' }]"
        />
        <van-field
          class="form"
          v-model="password"
          type="password"
          maxlength="6"
          name="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <button class="loginBtn" @click="reg">立即注册</button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Form, Field, Button, Toast,Icon } from "vant";
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(Toast);
Vue.use(Icon);
export default {
  data() {
    return {
      phone: "",
      password: "",
    };
  },
  computed: {
    rightPhone() {
      //验证手机号码
      return /^1(3[0-9]|5[189]|8[6789])[0-9]{8}$/.test(this.phone);
    },
  },
  created() {
    //底部栏消失
    this.$store.dispatch("footer/footernav", false);
  },
  beforeDestroy() {
    //销毁
    this.$store.dispatch("footer/footernav", true);
  },
  methods: {
    async reg() {
      if (!this.rightPhone) {
      // 手机号不正确
      Toast.fail("手机号不正确");
    }
    const url = "http://123.57.224.39:4000/reg";
    const ret=await this.$axios.get(url+'?'+"phone=" +this.phone+"&password=" +this.password)
    console.log("注册");
    if(ret.data.code===1){
        Toast.success('注册成功');
        this.phone=''
        this.password=''
    }
    },
    back(){
      this.$router.go(-1)
    }
  },
};
</script>

<style lang="scss" scoped>
.register {
  .van{
    margin-top: 10px;
    margin-left: 10px;
  }
  margin: 0 auto;
  .reg {
    margin-top: 70px;
    text-align: center;
    font-size: 18.5px;
    font-weight: normal;
  }
  .loginBtn {
    text-align: center;
    color: #fff;
    background: #ffcd5d;
    height: 41px;
    line-height: 41px;
    border-radius: 5px;
    width: 100%;
    display: block;
    border: none;
    cursor: pointer;
    font-size: 16px;
  }
}
</style>
